<template>
  <div class="app-container">

    <bread parentPathText="数据概念" currentPathText="幸福指数"/>

    <div class="app-content">
      <div class="left">
        <div class="top">
          <div class="title">
            <div class="item">累计受理</div>
            <div class="item">已办结</div>
          </div>
          <div class="title" style="padding: 0.15rem 0; border-bottom: none">
            <div class="item">{{val1}}</div>
            <div class="item">{{val2}}</div>
          </div>
          <div class="desc">幸福指数=已办结/累计受理</div>
        </div>
        <el-card
          class="box-card"
          :style="{ height: 7.1 * $store.state.radomRate + 'rem' }"
        >
          <div class="head">
            <div class="title">
              <span>受理事项排名</span>
            </div>
          </div>
          <chart7 />
        </el-card>
      </div>
      <div class="right">
        <el-card
          class="box-card"
          style="margin-bottom:2%;"
        >
          <div class="head">
            <div class="title">
              <span>月度幸福指数排名(%)</span>
            </div>
          </div>
          <chart8 />
        </el-card>
        <el-card
          class="box-card"
          
        >
          <div class="head">
            <div class="title">
              <span>月度幸福指数趋势(%)</span>
            </div>
          </div>
          <chart9 />
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import chart7 from "../components/chart7.vue";
import chart8 from "../components/chart8.vue";
import chart9 from "../components/chart9.vue";
export default {
  components: {
    chart7,
    chart8,
    chart9,
  },
  data() {
    return {
      val1:'',
      val2:'',
      time:new Date().getTime()
    };
  },
  mounted(){
    this.dataStatistics();
  },
  methods:{
        dataStatistics(){
      let params = {
        time:this.time,
      }
      let result = this.$md5.transferValue(params);
      this.axios.post(this.stateUrl.dataModel.dataStatistics,{
        time:this.time,
        sign: this.$md5.val(result)
      }).then(res=>{
        this.val1 = res.data.data.count;
        this.val2= res.data.data.dealCount;
      }).catch(()=>{})
    }
  }
};
</script>
<style lang="less" scoped>
.app-content {
  display: flex;
  .left {
    color: #fff;
    width: 7.32rem;
    .top {
      background: #217aeb;
      border-radius: 0.05rem;
      padding-bottom: 0.3rem;
      margin-bottom:0.1rem;
      .title {
        display: flex;
        border-bottom: 1px dashed #fff;
        justify-content: space-evenly;
        padding: 0.2rem 0;
        .item {
          font-size: 0.24rem;
        }
      }
      .desc {
        font-size: 0.18rem;
        margin: 0.4rem 0 0 0.42rem;
      }
    }
  }
  .right {
    flex: 1;
    margin-left: 0.2rem;
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
    .title {
      background: url("../assets/t.png") no-repeat;
      background-size: 100% 100%;
      width: 2.54rem;
      span {
        color: #333;
        font-size: 0.24rem;
        position: relative;
        top: -0.05rem;
        left: 0.2rem;
      }
    }
  }
}
</style>